<template>
  <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-width="120px"
      :rules="rules">
    <el-form-item label="产品价格" prop="productPrice">
      <el-input-number v-model="ruleForm.productPrice" :precision="2" :step="0.1" :max="999999999" />
    </el-form-item>
    <el-form-item label="销售渠道" prop="productSalesChannel">
      <el-radio-group v-model="ruleForm.productSalesChannel">
        <el-radio v-for="(item, idx) of productSalesChannelOptions" :label="item.value" :key="idx">{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="推荐用途" prop="productRecommendedUse">
      <el-input v-model="ruleForm.productRecommendedUse" placeholder="请输入产品描述" type="textarea" rows="5" />
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
  productPrice: 100, // 产品价格
  productSalesChannel: 'onlineAndOffline', // 产品销售渠道
  productRecommendedUse: '', // 产品推荐用途
})

const productSalesChannelOptions = [
  { label: '线上', value: 'online' },
  { label: '线下', value: 'offline' },
  { label: '线上+线下', value: 'onlineAndOffline' },
]

const rules = reactive<FormRules<typeof ruleForm>>({
  productPrice: [{ required: true, message: '请输入产品价格', trigger: 'change' },],
  productSalesChannel: [{ required: true, message: '请选择销售渠道', trigger: 'change' },],
  productRecommendedUse: [{ required: false, message: '请输入推荐用途', trigger: 'change' },],
})

defineExpose({
  ruleFormRef,
  ruleForm,
  rules,
})
</script>

<style lang="scss" scoped>

</style>
